<template>
    <v-data-table
            :headers="headers"
            :items="desserts"
            sort-by="calories"
            class="elevation-1"
            :search="search"
            v-loading="loading"
    >
        <template v-slot:top>
            <v-toolbar
                    flat
            >
                <v-divider
                        class="mx-4"
                        inset
                        vertical
                ></v-divider>
                <v-spacer></v-spacer>
                <v-text-field
                        v-model="search"
                        append-icon="mdi-magnify"
                        label="搜索"
                        single-line
                        hide-details
                ></v-text-field>
                <v-dialog
                        v-model="dialog"
                        max-width="500px"
                >
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn
                                color="primary"
                                dark
                                class="mb-2"
                                v-bind="attrs"
                                v-on="on"
                        >
                            添加
                        </v-btn>

                    </template>
                    <v-card>
                        <v-card-title>
                            <span class="text-h5">{{ formTitle }}</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.id"
                                                label="id"
                                                :disabled="true"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.name"
                                                label="宠物名"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.price"
                                                label="价格"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.userName"
                                                label="用户名"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.buyDate"
                                                label="购买日期"
                                        >
                                        </v-text-field>
                                        <el-date-picker
                                                v-model="editedItem.buyDate"
                                                type="datetime"
                                                placeholder="选择日期时间"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                        ></el-date-picker>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="close"
                            >
                                取消
                            </v-btn>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="save"
                            >
                                确定
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="dialogDelete" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5">你真的想删掉吗</v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                            <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-icon
                    small
                    class="mr-2"
                    @click="editItem(item)"
            >
                mdi-pencil
            </v-icon>
            <v-icon
                    small
                    @click="deleteItem(item)"
            >
                mdi-delete
            </v-icon>
        </template>
        <template v-slot:no-data>
            <v-btn
                    color="primary"
                    @click="initialize"
            >
                重置
            </v-btn>
        </template>
    </v-data-table>
</template>

<script>
   import * as order from "../../api/order";

   export default {
       data: () => ({
           dialog: false,
           dialogDelete: false,
           search: '',
           headers: [
               {
                   text: 'id',
                   align: 'start',
                   sortable: true,
                   value: 'id',
               },
               { text: '宠物名', value: 'name' },
               { text: '价格(元)', value: 'price' },
               { text: '用户名', value: 'userName' },
               { text: '购买日期', value: 'buyDate' },
               { text: '操作', value: 'actions', sortable: false },
           ],
           desserts: [],
           editedIndex: -1,
           loading: true,
           editedItem: {
               id: 0,
               name: "",
               price: 0.0,
               userName: "",
               buyDate: ""
           },
           defaultItem: {
               id: 0,
               name: "",
               price: 0.0,
               userName: "",
               buyDate: ""
           },
       }),

       computed: {
           formTitle () {
               return this.editedIndex === -1 ? '添加' : '编辑'
           },
       },

       watch: {
           dialog (val) {
               val || this.close()
           },
           dialogDelete (val) {
               val || this.closeDelete()
           },
           // eslint-disable-next-line no-unused-vars
           $route: {
               // eslint-disable-next-line no-unused-vars
               handler: function(val){
                   this.initialize();
               }
           }
       },

       created () {
           this.initialize()
       },

       methods: {
           initialize () {
               this.loading=true;
               let that=this
               order.getOrders().then(function (response) {
                   that.desserts = response.data.data
               })
               this.loading=false

           },

           editItem (item) {
               this.editedIndex = this.desserts.indexOf(item)
               this.editedItem = Object.assign({}, item)
               this.dialog = true
           },

           deleteItem (item) {
               this.editedIndex = this.desserts.indexOf(item)
               this.editedItem = Object.assign({}, item)
               this.dialogDelete = true
           },

           async deleteItemConfirm () {
               let that =this
               await  order.deleteOrders(this.editedItem).then(function (response) {
                   that.$store.commit('updateOrderCode',response.data.code)
               })
               if(this.$store.getters.getOrder===200) {
                   this.desserts.splice(this.editedIndex, 1)
               }
               this.closeDelete();

           },

           close () {
               this.dialog = false
               this.$nextTick(() => {
                   this.editedItem = Object.assign({}, this.defaultItem)
                   this.editedIndex = -1
               })

           },

           closeDelete () {
               this.dialogDelete = false
               this.$nextTick(() => {
                   this.editedItem = Object.assign({}, this.defaultItem)
                   this.editedIndex = -1
               })
           },

           async save () {
               let that = this
               if (this.editedIndex > -1) {
                   await order.updateOrders(this.editedItem).then(function (response) {
                       that.$store.commit('updateOrderCode',response.data.code)
                   })
                   if(this.$store.getters.getOrder===200) {
                       Object.assign(this.desserts[this.editedIndex], this.editedItem);
                   }

               }else{
                   await order.addOrders(this.editedItem).then(function (response) {
                       that.$store.commit('updateCode',response.data.code)
                   })
                   if(this.$store.getters.getOrder===200) {
                       this.desserts.push(this.editedItem);
                   }
               }
               this.close();

           },
       },
   }
</script>

<style scoped>

</style>
